<template>
	<view class="wrap">
		<view class="content">
			<view class="item" @click="goInfo">
				<view class="flex">
					<view class="icon info"></view>
					<view>我的信息</view>
				</view>
				<u-icon name="arrow-right" size="16"></u-icon>
			</view>
			<view class="item">
				<view class="flex">
					<view class="icon clear"></view>
					<view>当前版本</view>
				</view>
				<view class="gray">V {{ version }}</view>
			</view>
			<view class="item" @click="cachesHandle">
				<view class="flex">
					<view class="icon clear"></view>
					<view>清除缓存</view>
				</view>
				<view class="gray">{{storageSize}}</view>
			</view>
		</view>
		<view class="exit">
			<view class="btn" @click="showExit = true">退出</view>
		</view>
		
		<u-modal content="确定要退出登录？" :show="showExit" showCancelButton closeOnClickOverlay @confirm="exit"
			@cancel="showExit = false" @close="showExit = false"></u-modal>
		<u-modal content="确定清除缓存吗?" confirmText="清除" :show="showModal" showCancelButton closeOnClickOverlay
			@confirm="clearStorage" @cancel="showModal = false" @close="showModal = false"></u-modal>
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import Cache from '@/utils/cache'
	export default {
		data() {
			return {
				storageSize: '',
				showModal: false,
				showExit: false,
				userInfo: {},
				version:'',
			}
		},
		onLoad() {
			this.getStorageSize()
			this.postCheckVersion()
		},
		methods: {
			postCheckVersion() {
				plus.runtime.getProperty(plus.runtime.appid, (widgetInfo) => {
					console.log(widgetInfo.version)
					this.version = widgetInfo.version
					//根据当前平台去后台检测版本号
					// let obj = {
					// 	userVersion: `V${widgetInfo.version}`,
					// 	userPlatform: 'app'
					// }
					// console.log(obj)
					// checkVersion(obj).then((res) => {
					// 	console.log(res)
					// 	if (res.code == 0) {
					// 		this.show = true
					// 		this.upgradeContent = res.data.contentupdating
					// 		this.whether = res.data.whether
					// 	} else {
					// 		// uni.$u.toast(res.msg);
					// 	}
					// }).catch(err => {
					// 	console.log(err)
					// })
				})
			},
			goInfo() {
				uni.navigateTo({
					url: "./info"
				})
			},
			exit() {
				Cache.remove("TOKEN")
				Cache.remove("USERINFO")
				Cache.remove("MENU")
				this.showExit = false
				this.SETSTATUSINDEX(0)
				uni.$u.toast("退出成功")
				uni.reLaunch({
					url: "/pages/login/index"
				})
			},
			cachesHandle() {
				console.log(parseFloat(this.storageSize));
				console.log(!this.storageSize.includes("M"));
				// if (!this.storageSize.includes("M")) {
				// 	return
				// }
				// if (parseFloat(this.storageSize) < 10) {
				// 	return
				// }
				this.showModal = true
			},
			getStorageSize() {
				// #ifdef MP-WEIXIN
				uni.getStorageInfo({
					success: res => {
						console.log(res)
						console.log(res.keys);
						console.log(res.limitSize);
						let size = res.currentSize > 1 ? res.currentSize : 0;
						if (size < 1024) {
							this.storageSize = size + ' B';
						} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
							this.storageSize = Math.floor(size / 1024 * 100) / 100 + ' KB';
						} else if (size / 1024 / 1024 >= 1) {
							this.storageSize = Math.floor(size / 1024 / 1024 * 100) / 100 + ' M';
						}
					}
				})
				// #endif
				// #ifdef APP-PLUS
				plus.cache.calculate(size => {
					console.log(size)
					if (size < 1024) {
						this.storageSize = size + 'B';
					} else if (size / 1024 >= 1 && size / 1024 / 1024 < 1) {
						this.storageSize = Math.floor(size / 1024 * 100) / 100 + 'KB';
					} else if (size / 1024 / 1024 >= 1) {
						this.storageSize = Math.floor(size / 1024 / 1024 * 100) / 100 + 'M';
					}
				})
				// #endif
			},
			clearStorage() {
				this.showModal = false
				// #ifdef MP-WEIXIN
				uni.clearStorageSync();
				setTimeout(() => {
					//重新获取并显示清除后的缓存大小
					this.getStorageSize()
					uni.$u.toast("清除成功")
				}, 800)
				// #endif

				// #ifdef APP-PLUS
				plus.cache.clear(() => {
					setTimeout(() => {
						this.getStorageSize()
						uni.$u.toast("清除成功")
					}, 800)
				})
				// #endif
			},
			...mapMutations(["SETSTATUSINDEX"])
		}
	}
</script>

<style lang="scss">
	page {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #FAFAFA;
	}

	.content {
		background: #fff;
		padding: 0 32rpx;
		margin-top: 16rpx;

		.item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			font-weight: 500;
			color: #333333;
			padding: 20rpx 0;
			border-bottom: 1rpx solid #F5F7FB;

			.gray {
				font-size: 30rpx;
				font-weight: 400;
				color: #9E9E9E;
			}

			.flex {
				display: flex;
				align-items: center;
			}

			.icon {
				width: 48rpx;
				height: 48rpx;
				margin-right: 12rpx;
				background-position: center;
				background-size: contain;
				background-repeat: no-repeat;

				&.clear {
					background-image: url('@/static/icon_clear.png');
				}

				&.info {
					background-image: url('@/static/icon_info.png');
				}
			}

			&:last-child {
				border-bottom: none;
			}
		}
	}

	.exit {
		margin-top: 200rpx;
		padding: 0 32rpx;
		box-sizing: border-box;
		font-size: 30rpx;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;

		.btn {
			width: 100%;
			border-radius: 12rpx;
			background: linear-gradient(to right, #4d83b9, #003E81);
		}
	}
</style>
